<template>
    <div class="myDiv">
      <router-link to="/MyManageTribe" class="el-icon-back" >返回</router-link>


      <div class="centered-box">
        <div>
          <el-badge class="mark" :value="tribeMessageList.length" style="float: right; margin-top: 20px"
                    :hidden="tribeMessageList.length === 0">
            <i class="el-icon-message-solid" :class="{ 'blinking': isBlinking }"
               style="color: orange; font-size: 50px;" @click="dialogFormVisible=true"></i>
          </el-badge>
          <h1 style="font-family: 华文彩云; font-size: 50px">{{tribeList.name}}</h1>

          <div style="width: 300px">
            <img :src="tribeList.photopath" alt="图片走丢了。。。" width="100%"/>
          </div>
          <el-card class="box-card" style="width: 800px">
            <div slot="header" class="clearfix">
              <span style="font-size: larger; font-weight: bold;">简介</span>
            </div>
            <div >
              {{tribeList.produce}}
            </div>
          </el-card>
          <h4>部落成员</h4>
          <!--<div><el-link circle  type="primary" icon="el-icon-user" @click="manage(scope.row.id)">成员管理</el-link></div>-->
          <span v-for="tribeStaff in tribeList.tribeStaffList" :key="tribeStaff.tribeId" @click="message(tribeStaff.tribeId)">
            <div class="avatar-container">
                <div class="avatar">
                      <img :src="tribeStaff.user.photopath" alt="图片走丢了。。。" />
                </div>
                <div class="username">
                  {{ tribeStaff.user.username }}
                </div>
            </div>
            <el-tag :type="tribeStaff.state === '0' ? 'danger' : (tribeStaff.state === 1 ? 'primary' : 'success')" disable-transitions>
              {{ tribeStaff.state=== '0' ? '负责人' : (tribeStaff.state === '1' ? '管理员' : '部员') }}
            </el-tag>

          </span>

          <h4>部落活动</h4>
          <div style="display: flex;">
            <div class="card"   v-for="activity in activityList" :key="activity.id" >

              <div class="image">
                <img :src="activity.photopath" style="width: 100%"/>
              </div>
              <div class="content">
                <div class="title">
                  <strong>{{activity.name}}</strong>
                </div>
                <div class="description">
                  <p style="color: #fffa3b">{{activity.produce}}</p>
                </div>
                <!--<el-link type="danger" @click="goToDetails(tribestaff)">详情</el-link>-->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--申请信息-->
      <el-dialog title="消息" :visible.sync="dialogFormVisible">
        <el-link type="info" @click="history">历史消息</el-link>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item :title="tribeMessage.user.username" :name="tribeMessage.id" v-for="tribeMessage in tribeMessageList" :key="tribeMessage.id">
            <div>申请人信息：姓名：{{tribeMessage.user.username}} -- {{tribeMessage.user.university.name}} -- {{tribeMessage.user.college.name}} -- {{tribeMessage.user.major.name}}</div>
            <div>{{tribeMessage.content}}</div>
            <div>
              <el-link type="primary" @click="agree(tribeMessage.id)">同意</el-link>
              <el-link type="danger"  @click="disagree(tribeMessage.id)">拒绝</el-link>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-dialog>
      <el-dialog title="历史消息" :visible.sync="dialogFormVisible2">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item :title="history.user.username" :name="history.id" v-for="history in historyList" :key="history.id">
            <div>申请人信息：姓名：{{history.user.username}} -- {{history.user.university.name}} -- {{history.user.college.name}} -- {{history.user.major.name}}</div>
            <div>申请内容：{{history.content}}</div>
            <div>状态：<span>{{history.state}}</span></div>
            <div>消息处理人：<span style="color: orange">{{history.approveruser.username}}</span></div>

          </el-collapse-item>
        </el-collapse>
      </el-dialog>
      <!--管理成员：删除成员 设置管理员-->
      <el-dialog
        title="操作"
        :visible.sync="dialogVisible"
        width="30%">
        <span>
          <el-link circle  type="primary" icon="el-icon-user" @click="manage(scope.row.id)">设置为管理员</el-link>
          <el-link circle  type="primary" icon="el-icon-user" @click="manage(scope.row.id)" v-if="">设置为部员</el-link>
          <el-link circle  type="danger" icon="el-icon-delete" @click="manage(scope.row.id)" style="margin-left: 20px">删除</el-link>
        </span>
      </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "TribalDetails",
      data(){
          return{
            id:'',
            tribeList:{},
            userList:{},
            activityList:{},
            tribeMessageList:[],
            isBlinking: false, // 图标是否闪烁
            dialogFormVisible:false,
            dialogFormVisible2:false,
            dialogVisible:false,
            formLabelWidth:"100px",
            form:{},
            activeName:1,
            userId:'',
            historyList:[],
            visible: false,

          }
      },
      watch: {
        tribeMessageList: {
          handler(newVal) {
            this.isBlinking = newVal.length !== 0;
          },
          deep: true
        }
      },
      methods:{
        message(id){
          this.dialogVisible=true


        },
        history(){
        //  历史信息
          this.dialogFormVisible2=true
          this.$axios.get("tribeMessage/historylist/"+this.id).then(resp=>{
            console.log(resp.data)
            this.historyList=resp.data
          })

        },
          //同意申请
        agree(TMid){
          console.log("TMid",TMid)
          this.$axios.get("tribeMessage/agree?id="+TMid+'&approverId='+this.userId).then(resp=>{
            // console.log(resp)
            alert(resp.data.message)
            this.getManage()
          })


        },
        //不通过
        disagree(TMid){
          console.log("TMid",TMid)
          this.$axios.get("tribeMessage/disagree?id="+TMid+'&approverId='+this.userId).then(resp=>{
            // console.log(resp)
            alert(resp.data.message)
            this.getManage()
          })

        },
          getuserList(){
            this.$axios.get("/user/findByTId/"+this.id).then(resp=>{
              this.userList=resp.data
              console.log(this.userList )
            })
          },
        getactivity(){
          this.$axios.get("/activity/findByTId/"+this.id).then(resp=>{
            this.activityList=resp.data
            console.log(this.activityList )
          })
        },
        //查看申请信息
        getManage(){
            this.$axios.get("tribeMessage/list/"+this.id).then(resp=>{
              this.tribeMessageList=resp.data
              console.log(this.tribeMessageList )
            })
        }
      },


      mounted() {
          if (this.$route.params.id != null) {
            this.id = this.$route.params.id
          }else {
            this.id=sessionStorage.getItem("tribeId")
          }
        // this.tribeList = this.$route.params.object
        console.log(this.id)

        this.$axios.get("/tribe/findById/"+this.id).then(resp=>{
          this.tribeList=resp.data
          console.log(resp.data )
          this.activityList=this.tribeList.activityList
          console.log("this.activityList ",this.activityList )
        })

        this.getManage()

      },
      created(){
          this.userId=JSON.parse(sessionStorage.getItem("user1")).id
        console.log("this.userId",this.userId)
      }
    }
</script>

<style scoped>
  .myDiv{
   /* !* 设置背景图片的URL *!
    background-image: url("../../assets/bg.jpg");
    !* 设置背景图片的大小 *!
    background-size: 50% 75%;
    !* 设置背景图片的重复方式 *!
    background-repeat: no-repeat;
    !* 设置背景图片的位置 *!
    background-position: center;*/
    background: linear-gradient(90deg, #b9f1ff 0%, #ffd899 100%);

  }
  .el-icon-back{
    margin: 50px 0px 50px 50px;
    font-size: 150%;
  }
  .centered-box {
    width: 900px; /* 设置盒子的宽度 */
    height: 1100px; /* 设置盒子的高度 */
    border: 1px solid #060605;
    margin: 0 auto; /* 使用 margin 属性将盒子水平居中 */
    display: flex;
    /*justify-content: center; !* 使用 flexbox 属性将内部内容水平居中 *!*/
    /*align-items: center; !* 使用 flexbox 属性将内部内容垂直居中 *!*/
    padding-left: 50px; /* 调整内边距宽度 */
  }
  .avatar-container {
    position: relative;
    display: inline-block;
  }

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .username {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0px;
    text-align: center;
    line-height: 10;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 50%;
  }

  .avatar-container:hover .username {
    visibility: visible;
    opacity: 1;
  }
  .tag{

  }

  .card {
    display: flex;
    align-items: center;
    width:400px;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    transition: box-shadow 0.2s ease-in-out;
    margin-left: 20px;
    background: linear-gradient(90deg, #b9f1ff 0%, #45c3ff 100%);
  }

  .card:hover {
    box-shadow: 0 0 5px 3px #ccc;
    transform: scale(1.1);
  }

  .image {
    flex: 0 0 150px;
    margin-right: 10px;
  }

  .title {
    font-weight: bold;
  }

  .description {
    margin-top: 2px;
    display: -webkit-box; /* 设置为弹性盒子布局 */
    -webkit-line-clamp: 2; /* 限制最多显示两行内容 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    text-overflow: ellipsis; /* 超出容器的部分显示省略号 */
  }
  /*图标闪烁*/
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .blinking {
    animation: blink 1s infinite;
  }
</style>
